<html>

<style>
    * {
        margin: 0;
    }

    #content {
        color: white;
        position: absolute;
        left: -20px;
        top: -10px;
        white-space: pre-wrap;
        height: 200px;
        overflow: auto;
    }
</style>

<script type="importmap">
	{
	  "imports": {
		"three": "../../three.js-r151/build/three.module.js",
		"three/addons/": "../../three.js-r151/examples/jsm/"
	  }
	}
</script>

<body>
    <div id="content">
        1. 穿点成线
        2. 据说有区别，但是实在看不出来
        闭合线条LineLoop、非连续的线条 LineSegments， Line属于啥
        3. 三点就成面了
        <a href="http://www.webgl3d.cn/pages/ff37d3/">4. 法线的作用是什么？用来光照吗？</a>
    </div>

    <div id="canvas"></div>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // 1. 创建三大件
        const scene = new THREE.Scene();

        // a. 创建一个空的几何体对象, 所有几何体的父类
        const geometry0 = new THREE.BufferGeometry();
        const vertices = new Float32Array([
            0, 2, 0, //顶点1坐标
            1, 2, 0, //顶点2坐标
            0, 2, 0, //顶点3坐标
            0, 2, 2, //顶点4坐标
            0, 2, 2, //顶点5坐标
            1, 2, 1, //顶点6坐标
        ]);
        //3个为一组，表示一个顶点的xyz坐标
        // 设置几何体attributes属性的位置属性
        geometry0.attributes.position = new THREE.BufferAttribute(vertices, 3);
        // 点渲染有自己的独有材料
        // const material0 = new THREE.PointsMaterial({ color: 'green', size: 0.2 });
        // 线材质对象
        const material0 = new THREE.LineBasicMaterial({ color: 'green' });
        // const points0 = new THREE.Points(geometry0, material0);
        // 创建线模型对象
        const points0 = new THREE.Line(geometry0, material0);
        scene.add(points0)

        // b. 利用常见几何体也可以快速构建，不过需要改材料和mesh
        const geometry = new THREE.BoxGeometry(1, 1, 1);

        const material = new THREE.PointsMaterial({ color: 'yellow', transparent: true, opacity: 0.3, });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        const material2 = new THREE.LineBasicMaterial({ color: 'purple' });
        const points = new THREE.Line(geometry, material2);
        points.position.x = 2
        scene.add(points)

        // c. 来个复杂点的集合体
        const geometry3 = new THREE.SphereGeometry(1, 10, 5);
        const material3 = new THREE.LineBasicMaterial({ color: 'red', size: 0.1 });
        const points3 = new THREE.Line(geometry3, material3);
        points3.position.z = 2
        scene.add(points3)



        // 线模型对比
        // 线材质对象
        const material4 = new THREE.LineBasicMaterial({
            color: "white" //线条颜色
        });
        // 创建线模型对象
        const line = new THREE.Line(geometry, material4);
        line.position.set(0, 0, 4.5)
        scene.add(line)

        // 看不出来。。。
        // 闭合线条
        const line2 = new THREE.LineLoop(geometry, material4);
        line2.position.set(-2, 0, 4.5)
        scene.add(line2)
        //非连续的线条
        const line3 = new THREE.LineSegments(geometry, material4);
        line3.position.set(2, 0, 4.5)
        scene.add(line3)




        // 添加辅助坐标系
        const axesHelper = new THREE.AxesHelper(10);
        scene.add(axesHelper);

        // 1.2 相机
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(3, 3, 3)

        // 1.3 渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        let canvasDom = document.getElementById("canvas");
        canvasDom.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, canvasDom);
        // 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件

        renderer.render(scene, camera);
    </script>
</body>

</html>